<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <van-cell v-for="(item,index) in list" :key="index" >
  <div class="enclosure">
    <div class="endoconch">
      <!-- <img src="../../../../images/封面_u1151.png" alt=""> -->
      <img :src="item.img" alt="">
    </div>
    <div class="intimal2">
      <div class="intimal21">
        <p>{{ item.concertName }}</p>
      </div>
      <div class="intimal22">
        <p>{{ item.holdingTime }}</p>
        <p>{{ item.location }}</p>
      </div>
      <div class="intimal23">
        <p>￥{{ item.univalence }}</p>
      </div>
    </div>
  </div>
</van-cell>
  </van-list>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
     
      axios
        .get('api/vocalconcert')
        .then(response => {
          const newData = response.data;
          this.list = this.list.concat(newData.data);

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = false;
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.enclosure {
  width: 335px;
  height: 10px;
//   background-color: rgb(204, 204, 204);
  font-size: 12px;
  margin: 20px auto;
  .endoconch {
    width: 120px;
    height: 154px;
    float: left;
    img{
        width: 100%;
        height: 100%;
    }
    // background-color: yellow;
  }
  .intimal2 {
    width: 190px;
    height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // background-color: yellow;
    margin-left: 140px;
    .intimal21 {
      p {
        margin: 0;
        font-weight: 500;
        line-height: 22px;
        font-size: 14px;
        color: #333333;
        margin-top: 5px;
      }
    }
    .intimal22 {
      p {
        margin: 0;
        font-weight: 500;
        line-height: 22px;
        font-size: 10px;
        color: #CCCCCC;
      }
    }
    .intimal23{
      p {
        margin: 0;
        font-weight: 800;
        line-height: 22px;
        font-size: 14px;
        color: #333333;
        margin-bottom: 5px;
      }
    }
  }
}
.van-cell::after{
          all: unset;
        }
        .van-cell{
          padding: 0;
        }     

</style>